<template>
  <div id="app">
    <div class="app">
      <div class="user-task">
        <img
          src="…jFo4e5XU3F6Uv4PzsqEn/B1VshFHJ0SGMAAAAAElFTkSuQmCC"
          alt=""
        />
      </div>
      <div class="sku-sale"></div>
      <div class="sku-sale-rank"></div>
    </div>
    <div class="sku-sale-collect">
      <div class="title">
        <h3>销售数据</h3>
        <span>2023.03.06 ~ 2023.03.11</span>
      </div>
      <div class="body">
        <div ref="box" class="box"></div>
        <div ref="box1" class="box1"></div>
      </div>
    </div>
    <div class="partner-node-collect">
      <div class="left">
        <div class="title">
          <h3>合作商点位Top5</h3>
        </div>
        <div class="box">
          <div ref="box2" class="box-l"></div>
          <div class="box-r">
            <h3>18</h3>
            <p>点位数</p>
            <h3>5</h3>
            <p>合作商</p>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="title">
          <h3>异常设备监控</h3>
        </div>
        <div class="box">
          <img
            src="https://likede2-admin.itheima.net/img/empty.87c4f71b.png"
            alt=""
          />
          <p>暂无数据</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import { setItem, getItem } from "@/utils/localStorage";
export default {
  name: "DikedePcIndex",

  data() {
    return {
      parmasLine: {
        id: "1",
        start: "2023-03-06",
        end: "2023-03-11",
      },
      paramsBar: {
        bstart: "2023-03-06",
        bend: "2023-03-11",
      },
      pieList: getItem("pie"),
      xAxisLine: getItem("xAxis-Line"),
      seriesLine: getItem("series-Line"),
      xAxisBar: getItem("xAxis-Bar"),
      seriesBar: getItem("series-Bar"),
    };
  },
  mounted() {
    this.getEchatrs();
  },
  created() {
    this.getpieList();
    this.getlineList();
    this.getbarList();
  },
  methods: {
    getEchatrs() {
      const myChart = this.$echarts.init(this.$refs.box);
      const option = {
        title: {
          left: 170,
          top: 15,
          text: "销售额趋势图",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.xAxisLine,
          axisLabel: {
            interval: 0,
            fontSize: 7,
          },
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.seriesLine,
            type: "line",
            smooth: true,
            areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#dc3881", // 0% 处的颜色
                    },
                    {
                      offset: 0.7,
                      color: "rgba(255, 220, 220,0)", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
          },
        ],
        color: ["#ff5757"],
      };
      myChart.setOption(option);

      const myChart1 = this.$echarts.init(this.$refs.box1);
      const option1 = {
        title: {
          left: 180,
          top: 15,
          text: "销售额分布",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.xAxisBar,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "25",
            data: this.seriesBar,
          },
        ],
      };
      myChart1.setOption(option1);

      const myChart2 = this.$echarts.init(this.$refs.box2);
      const option2 = {
        toolbox: {
          show: true,
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [35, 100],
            center: ["50%", "50%"],
            roseType: "radius",
            itemStyle: {
              borderRadius: 0,
            },
            data: this.pieList,
          },
        ],
      };
      myChart2.setOption(option2);
    },
    async getpieList() {
      const res = await request({
        url: "/api/vm-service/node/nodeCollect",
      });
      setItem("pie", res.data);
    },
    async getlineList() {
      // const id = "1";
      // const start = "2023-03-06";
      // const end = "2023-03-11";
      const res = await request({
        url: `/api/order-service/report/amountCollect/${this.parmasLine.id}/${this.parmasLine.start}/${this.parmasLine.end}`,
      });
      setItem("series-Line", res.data.series);
      setItem("xAxis-Line", res.data.xAxis);
    },
    async getbarList() {
      const res = await request({
        url: `/api/order-service/report/regionCollect/${this.paramsBar.bstart}/${this.paramsBar.bend}`,
      });
      setItem("series-Bar", res.data.series);
      setItem("xAxis-Bar", res.data.xAxis);
    },
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
#app {
  width: 100%;
  position: relative;
  .app {
    display: flex;
    justify-content: space-between;
    .user-task {
      width: 528px;
      height: 166px;
      background: #e9f3ff;
      background-image: url(""),
        url("https://likede2-admin.itheima.net/img/task.66b715b7.png");
      background-repeat: no-repeat;
      background-position: 0 0, calc(100% - 12px) 100%;
      border-radius: 20px;
    }
    .sku-sale {
      width: 443px;
      height: 166px;
      background: #fbefe8
        url("https://likede2-admin.itheima.net/img/sale.606b0d8c.png") no-repeat
        calc(100% - 12px) 100%;
      border-radius: 20px;
    }
    .sku-sale-rank {
      width: 317px;
      height: 538px;
      background-color: #fff;
      border-radius: 20px;
    }
  }

  .sku-sale-collect {
    position: absolute;
    left: 0;
    top: 184px;
    width: 952px;
    height: 310px;
    border-radius: 20px;
    background-color: #fff;
    padding: 20px;
    .title {
      height: 34px;
      display: flex;
      align-items: center;
      h3 {
        font-size: 16px;
        color: #333;
        margin-right: 10px;
      }
      span {
        font-size: 12px;
        color: #999;
      }
    }
    .body {
      display: flex;
      margin-bottom: 40px;
      .box1 {
        width: 476px;
        height: 278px;
      }
      .box {
        width: 476px;
        height: 278px;
      }
    }
  }
  .partner-node-collect {
    margin-top: 20px;
    position: relative;
    .left {
      box-sizing: border-box;
      border-radius: 20px;
      padding: 20px;
      position: absolute;
      left: 0px;
      top: 0;
      width: 767px;
      height: 353px;
      background-color: #fff;
      .box {
        position: relative;
        display: flex;
        .box-l {
          box-sizing: border-box;
          width: 529px;
          height: 300px;
          padding: 16px 10px 0;
        }
        .box-r {
          position: absolute;
          top: 30px;
          right: 15px;
          box-sizing: border-box;
          width: 217px;
          height: 300px;
          width: 154px;
          height: 230px;
          padding-top: 47px;
          padding-left: 38px;
          background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0,
            linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0,
            linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%,
            linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
          background-size: 50% 50%;
          background-repeat: no-repeat;
          p {
            margin: 0;
          }
          h3 {
            font-size: 24px;
            margin-bottom: 0;
          }
        }
      }
      .title {
        height: 25px;
        display: flex;
        align-items: center;
        h3 {
          font-size: 16px;
          color: #333;
          margin-right: 10px;
        }
      }
    }
    .right {
      box-sizing: border-box;
      padding: 20px;
      border-radius: 20px;
      position: absolute;
      top: 0;
      right: 0px;
      width: 542px;
      height: 353px;
      background-color: #fff;
      .box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
      }
      .title {
        height: 25px;
        display: flex;
        align-items: center;
        h3 {
          font-size: 16px;
          color: #333;
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
